
const ck1Obj = document.querySelector(`.ck1`)
const ck2Obj = document.querySelector(`.ck2`)
const postData = {
    author: ``,
    cateid: ``,
    click: ``,
    content: ``,
    create_date: ``,
    description: ``,
    ishot: ``,
    istop: ``,
    keywords: ``,
    lovenum: ``,
    pic: ``,
    status: ``,
    tags: ``,
    title: ``,
}


// todo 渲染标签
async function renderLabel() {
    try {
        const { data: { data } } = await axios.get(`/ydd_tag/all`)
        document.querySelector(`.tag`).innerHTML = data.map(ele => `
        <input type="checkbox" name="" lay-skin="tag" title="${ele.tagname}" value="${ele.tagname}">
        `).join(``)

        // layui 提供的表单重新渲染的方法
        var form = layui.form;
        form.render()
    } catch (err) {
        console.log(err);
    }
}
renderLabel()
// document.querySelector(`.tag`).addEventListener(`click`, function (e) {
//     if (e.target.tagName = `DIV`) {
//         e.target.classList.add(`layui-form-checked"`)
//     }
// })

// todo 渲染分类
async function renderCate() {
    try {
        const { data: { data: { data } } } = await axios.get(`/ydd_cate/list`)
        // console.log(data);
        document.querySelector(`#cate`).innerHTML = data.map(ele => `<option value=""></option><option value="${ele.id}">${ele.catename}</option>`).join(``)

        // layui 提供的表单重新渲染的方法
        var form = layui.form;
        form.render()
    } catch (err) {
        console.log(err);
    }
}
renderCate()

// todo 图片上传

layui.use(function () {
    var upload = layui.upload;
    var layer = layui.layer;
    var element = layui.element;
    // var $ = layui.$;

    // 多图片上传
    upload.render({
        elem: '#ID-upload-demo-btn-2',
        url: 'https://httpbin.org/post', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
        multiple: true, //是否允许多文件
        before: function (obj) {

            // 预读本地文件示例，不支持ie8
            obj.preview(function (index, file, result) {
                $('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')

                // const fd = new FormData()
                // fd.append("file", file)
                async function getPic() {
                    const { data: { data: { savePath } } } = await axios.post(`/common/upload?type=images`, fd, {
                        headers: {
                            "Content-Type": "multipart/form-data"
                        }
                    })
                    // console.log(savePath);
                    postData.pic = savePath

                }
                // getPic()
            });
        },
        done: function (res) {
            // 上传完毕
            // …
        },

    });
});



// todo 富文本
const { createEditor, createToolbar } = window.wangEditor

const editorConfig = {
    placeholder: '请输入文章内容',
    onChange(editor) {
        const html = editor.getHtml()
        // console.log('editor content', html)
        // 也可以同步到 <textarea>
    }
}

const editor = createEditor({
    selector: '#editor-container',
    html: '<p><br></p>',
    config: editorConfig,
    mode: 'default', // or 'simple'
})

const toolbarConfig = {}

const toolbar = createToolbar({
    editor,
    selector: '#toolbar-container',
    config: toolbarConfig,
    mode: 'default', // or 'simple'
})





// todo 发送Ajax请求反显数据
async function render() {
    // location.reload()
    const $ = layui.$;
    const form = layui.form;
    const id = localStorage.getItem(`editId`)
    console.log(id);
    try {
        const { data: { data } } = await axios.get(`/ydd_article/rowInfo`, { params: { id } })
        // console.log(data);
        getData = data
        console.log(data);
    } catch (err) {
        console.log(`请求失败`);
    }
    console.log(getData);
    // localStorage.removeItem(`editId`)
    // 表单赋值
    form.val('demo-val-filter', getData);
    // 富文本赋值
    editor.setHtml(getData.content)
    // 标签赋值
    // !排他思想解决
    document.querySelectorAll(`.tag .layui-form-checked`).forEach(ele => {
        // ele.classList.classList.remove(`layui-form-checked`)
        ele.click()
        console.log(ele);
    })
    // console.log(getData.tags.split(`,`));
    const oldArr = getData.tags.split(`,`)
    // console.log(Array.from(document.querySelectorAll(`.tagAll input`)));
    oldArr.forEach(ele => {

        // console.log(ele);
        // console.log(Array.from(document.querySelectorAll(`.tagAll input`)).filter(item => item.value === ele));
        Array.from(document.querySelectorAll(`.tagAll input`)).filter(item => item.value === ele).forEach(i => {
            // i.nextSibling.classList.add(`layui-form-checked`)
            console.log(i.nextSibling);
            // form.render()

            // !!!!bug多重点击 渲染问题  157行已解决
            console.log(i);
            if (!i.nextSibling.classList.contains(`layui-form-checked`)) {
                i.nextSibling.click()
            }
            // i.nextSibling.click()

        })
    });



    // 时间戳转日期 重新赋值
    document.querySelector(`#date`).value = dayjs(getData.create_date).format('YYYY-MM-DD')
    // !图片返显bug解决
    $('#upload-demo-preview').append(`<img src="http://124.223.14.236:8060/${getData.pic}" alt="" style="width: 90px; height: 90px;">`)
    if (document.querySelectorAll(`#upload-demo-preview img`).length > 1) {
        document.querySelectorAll(`#upload-demo-preview img`)[0].remove()
        // console.log(document.querySelectorAll(`#upload-demo-preview img`)[0]);

        // console.log(`大于等与1`);
    }
}
render()

// todo 发送Ajax请求修改数据
// todo 表单提交
layui.use(['form', 'laydate', 'util'], function () {
    var form = layui.form;
    var layer = layui.layer;
    var laydate = layui.laydate;
    var util = layui.util;

    // 提交事件
    form.on('submit(demo1)', function (data) {


        const tagArr = document.querySelectorAll(`.tagAll .layui-form-checked`)
        // console.log(tagArr[0].previousSibling.value);
        var field = data.field; // 获取表单字段值
        for (let k in field) {
            // console.log(k);
            // console.log(field[k]);
            if (k === `create_date`) {
                // console.log(field[k]);
                field[k] = +dayjs(field[k]).valueOf()
                // console.log(field[k]);
            }
            if (k === `click`) field[k] = +field[k]
            postData[k] = field[k]
        }

        //! 此处可执行 Ajax 等操作

        // 手动获取分类id  cateid
        postData.cateid = +document.querySelector(`#cate`).value
        // 手动获取tag的值
        // console.log(Array.from(tagArr).map(ele => `${ele.previousSibling.value}`).join(`,`));
        postData.tags = Array.from(tagArr).map(ele => `${ele.previousSibling.value}`).join(`,`)
        // 手动获取istop ishop的值
        if (ck1Obj.checked) {
            postData.ishot = +`1`
        } else {
            postData.ishot = +`0`
        }
        if (ck2Obj.checked) {
            postData.istop = +`1`
        } else {
            postData.istop = + `0`
        }
        // 手动获取content 值
        postData.content = editor.getHtml()
        // 获取id
        postData.id = getData.id
        // 获取图片
        postData.pic = getData.pic

        console.log(postData);
        // 封装发送post请求函数
        async function post() {
            try {
                const res = await axios.post(`/ydd_article/update`, postData)
                console.log(res);
                layer.msg(`修改文章成功`, { icon: 1 }, () => {
                    // 修改成功清空页面
                    document.querySelector(`#reset`).click()
                    if (document.querySelector(`#upload-demo-preview img`)) {
                        document.querySelector(`#upload-demo-preview img`).src = ``
                        document.querySelector(`#upload-demo-preview img`).alt = ``
                    }
                    editor.setHtml(``)
                    window.parent.document.querySelector(`#article`).click()
                    // location.reload()
                    //! 跳转 
                    // window.parent.frames[1].renderList()

                    // ! Object.values返回值是一个由对象的属性值组成的数组可以用来获取一个对象属性值的列表，但是不保证一一对应关系，因为对象的属性顺序不一定是固定的
                    const arr = Object.values(window.parent.frames)
                    console.log(arr);
                    const arr2 = arr.find(ele => ele.location.href.includes(`article.html`))
                    console.log(arr2);
                    arr2.renderList()
                    // location.href = `article.html`


                })
            } catch (err) {
                console.log(err);
                layer.alert(`添加文章失败`)
            }
        }
        post()


        return false; // 阻止默认 form 跳转
    });

    // 日期
    laydate.render({
        elem: '#date'
    });
})
